<template>
	<view>
		<slot name="header"></slot>
		<view class="a-grid" :class="[hideBorder?'hide-border':'',closeHeight?'close-height':'']">
			<view class="a-grid-item" v-for="(i,index) in _list" :key="i.navId+''+index" :style="{width:_row}">
				<view class="boder"></view>
				<slot :row="i" :index="index"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		list:{
			type:[Object,Array],
			default(){
				return [];
			}
		},
		cell:{
			type:Number,
			default:3
		},
		hideBorder:false,
		closeHeight:false
	},
	computed:{
		_row(){
			return 100/this.cell + '%';
		},
		_list(){
			let list = this.list;
			if(list instanceof Object){
				list = Object.keys(list).map(key=>{
					const x = list[key];
					if(x instanceof Object){
						x.navId = key;
						return x;
					}
				}).filter(x=>{
					if(x) return x;
				});
			}
			list = list.filter(x=>{
				if(!x.visible) return x;
			});
			const length = list.length,
			b = length%this.cell;
			return [...list,...new Array(b?this.cell - (length%this.cell):0).fill('')];
		}
	},
	methods: {}
};
</script>

<style lang="scss">
.a-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	&::before,
	&::after{
		content: '';
		position: absolute;
		top: -1px;
		left: -1px;
	}
	&::before{
		bottom: 0;
		width: 1px;
		border-right: 1px solid #dbdfe1;
		transform-origin: 100% 0;
		transform: scaleX(0.5);
	}
	&::after{
		right: 0;
		height: 1px;
		border-bottom: 1px solid #dbdfe1;
		transform-origin:0 100%;
		transform: scaleY(0.5);
	}
	&.hide-border{
		&::before,
		&::after{
			display: none;
		}
		.boder{
			display: none;
		}
	}
	&.close-height .a-grid-item{
		&::after{
			display: none;
		}
	}
	
	&-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 25%;
		&::after ,
		&::before{
			content: '';
			display: block;
			width: 0;
			height: 0;
		}
		&::after {
			padding-top: 100%;
			float: left;
		}
		&::before {
			clear: both;
			visibility: hidden;
		}
		position: relative;
		
		.boder{
			width: 0;
			height: 0;
			&::before,
			&::after{
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
			}
			&::before{
				top: 0;
				width: 1px;
				border-right: 1px solid #dbdfe1;
				transform-origin: 100% 0;
				transform: scaleX(0.5);
			}
			&::after{
				left: 0;
				height: 1px;
				border-bottom: 1px solid #dbdfe1;
				transform-origin:0 100%;
				transform: scaleY(0.5);
			}
		}
	}
}
</style>
